// Menu
//
// Markup: menu.hbs
//
// Style guide: app.molecules.menu
.menu {
    @include media($breakpoint-xs) {
        @include span-columns(2);
    }
    @include media($breakpoint-s) {
        @include span-columns(4);
    }
    @include media($breakpoint-m) {
        @include span-columns(9 of 12);
    }
    @include media($breakpoint-l) {
        @include span-columns(9 of 12);
    }
    @include media($breakpoint-xl) {
        @include span-columns(9 of 12);
    }
    @include media($breakpoint-xxl) {
        @include span-columns(12 of 24);
    }
    &-list {
        &--item {
            text-align: center;
            @include media($breakpoint-xs) {
                @include span-columns(2 of 2);
            }
            @include media($breakpoint-s) {
                @include span-columns(4 of 4);
            }
            @include media($breakpoint-m) {
                @include span-columns(4 of 9);
            }
            @include media($breakpoint-l) {
                @include span-columns(3 of 9);
            }
            @include media($breakpoint-xl) {
                @include span-columns(3 of 9);
            }
            @include media($breakpoint-xxl) {
                @include span-columns(4 of 12);
            }
        }   
    }
}